<template>
    <div class="container">
        <!-- <router-link to="/index">
            <van-icon name="revoke" color="#fdc03a" />
        </router-link> -->
        <span>注册未冬</span>
        <!-- <van-form @submit="onSubmit" class="form"> -->
        <van-form class="form" validate-first @failed="onFailed" @submit="onSubmit">
            <van-field v-model="username" type="text" name="账号" label="账号:" placeholder="6-16位,须包含大、小写字母,数字"
                :rules="userRules" required />
            <van-field v-model="uname" type="text" name="昵称" label="昵称:" placeholder="最大长度为10" :rules="unameRules"
                required />
            <van-field v-model="upwd" :type="passwordType" name="密码" label="密码:" placeholder="8-16位,含字母、数字或者英文符号区分大小写"
                :rules=upwdRules required>
                <template slot="right-icon">
                    <span class="solts" @click="switchPasswordType">
                        <van-icon name="closed-eye" v-if="passwordType=='password'" />
                        <van-icon name="eye" v-else />
                    </span>
                </template>
            </van-field>
            <van-field v-model="upwd2" :type="password" name="确认密码" label="确认密码:" placeholder="请再次输入密码"
                :rules=upwd2Rules required>
                <template slot="right-icon">
                    <span class="solts" @click="switchPasswordType1">
                        <van-icon name="closed-eye" v-if="password=='password'" />
                        <van-icon name="eye" v-else />
                    </span>
                </template>
            </van-field>
            <van-field v-model="uemail" type="email" name="邮箱" label="邮箱:" placeholder="邮箱地址" :rules=uemailRules
                required />
            <div class="input">
                <!-- <span style="font-size: 14px; font-weight: bold;">验证码:</span> -->
                <van-field v-model="securitycode" type="text" label="验证码" placeholder="请输入验证码" :rules="codeRules"
                    required />
                <div class="code" @click="refreshCode">
                    <!--   ：fresh：父组件向子组件传送刷新验证码的信号；@makedCode：子组件向父组件传送验证码的值-->
                    <s-identify v-model="code" :fresh="flag" @makedCode="getMakedCode"></s-identify>
                </div>
            </div>
            <div style="margin: 30px 0 20px 0;">
                <van-button round block type="info" native-type="submit" :disabled="checked==false">
                    注册</van-button>
            </div>
        </van-form>
        <router-link to="/login">已有帐号，去登录！</router-link>
        <van-checkbox v-model="checked" style="margin:30px 0 10px 0">我已同意
            <router-link to="/agreement">《未冬用户协议》</router-link>
        </van-checkbox>

    </div>

</template>
<script>
import SIdentify from '../components/SIdentify.vue'
// import Identify from "../components/Identify.vue";

export default {
    components: { SIdentify },
    data() {
        return {
            checked: false,
            username: '',   //账号
            uname: '',      //昵称
            upwd: '',       // 密码
            upwd2: '',      // 确认密码
            uemail: '',      // 邮箱
            phone: '',       //手机号
            userState: '',     //账号
            unameState: '',     //昵称
            upwdState: '',      // 密码
            upwd2State: '',     // 确认密码
            uemailState: '',      // 邮箱
            phoneState: '',     //手机号
            value: '',
            passwordType: 'password',
            password: 'password',
            flag: true,
            code: '',
            securitycode: '',
            // 验证码
            codeRules: [{
                required: true, message: '验证码不能为空', trigger: 'onBlur'
            }, {
                validator: (value) => {
                    console.log(value)
                    console.log('验证码', this.code)
                    if (value == this.code) {
                        return true
                    } else {
                        return false
                    }
                },
                message: '验证码不正确',
                trigger: 'onBlur'
            }],
            // 账号
            userRules: [{
                required: true, message: '账号不能为空', trigger: 'onBlur'
            }, {
                // 自定义校验规则
                validator: value => {
                    console.log(value)
                    return /^[a-zA-Z0-9_-]{6,16}$/
                        .test(value)
                },
                message: '请输入正确格式的须包含大、小写字母,数字',
                trigger: 'onBlur'
            }, {
                validator: (value) => {
                    let url = `http://39.108.211.154:8080/check_username?username=${value}`
                    return value = this.axios.get(url).then(res => {
                        // console.log(res.data)
                        if (res.data == 'exists') {
                            // console.log('123')
                            return false
                        } else if (res.data == 'non-exists') {
                            return true
                        }
                    })
                },
                message: '账号已存在',
                trigger: 'onBlur'
            }],
            // 昵称
            unameRules: [{
                required: true, message: '昵称不能为空', trigger: 'onBlur'
            }, {
                // 自定义校验规则
                validator: value => {

                    let uname = /^[\u4E00-\u9FA5A-Za-z0-9`~!@#$%^&*()_\-+=?:"{}|,.~@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]{1,10}$/
                    if (uname.test(value)) {
                        this.unameState = 'success'
                        console.log(this.unameState)
                        return true
                    } else {
                        this.unameState = 'error'
                        return false
                    }
                    // return /^[\u4e00-\u9fa5]{4,8}$/
                    //     .test(value)

                },
                message: '请输入正确格式的昵称',
                trigger: 'onBlur'
            }, {
                validator: (value) => {
                    let url = `http://39.108.211.154:8080/check_uname?uname=${value}`
                    return value = this.axios.get(url).then(res => {
                        // console.log(res.data)
                        if (res.data == 'exists') {
                            // console.log('123')
                            return false
                        } else if (res.data == 'non-exists') {
                            return true
                        }
                    })
                },
                message: '昵称已存在',
                trigger: 'onBlur'
            }],
            // 邮箱
            uemailRules: [{
                required: true, message: '邮箱不能为空', trigger: 'onBlur'
            }, {
                // 自定义校验规则
                validator: value => {
                    let uemail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/
                    if (uemail.test(value)) {
                        this.uemailState = 'success'
                        return true
                    } else {
                        this.uemailState = 'error'
                        return false
                    }
                    // return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/
                    //     .test(value)
                },
                message: '请输入正确格式的邮箱',
                trigger: 'onBlur'
            }, {
                validator: (value) => {
                    let url = `http://39.108.211.154:8080/check_uemail?uemail=${value}`
                    return value = this.axios.get(url).then(res => {
                        // console.log(res.data)
                        if (res.data == 'exists') {
                            // console.log('123')
                            return false
                        } else if (res.data == 'non-exists') {
                            return true
                        }
                    })
                },
                message: '邮箱已存在',
                trigger: 'onBlur'
            }],
            // 密码
            upwdRules: [{
                required: true, message: '请填写密码', trigger: 'onBlur'
            }, {
                // 自定义校验规则
                validator: value => {
                    // let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
                    let pwd = /^.{6,20}$$/
                    if (pwd.test(value)) {
                        this.message = 'success'
                        return true
                    } else {
                        this.upwdState = 'error'
                        return false
                    }
                    // return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
                    //      .test(value)
                },
                message: '密码长度不足6位',
                trigger: 'onBlur'
            }, {
                validator: value => {
                    let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
                    // let pwd = /^.{6,20}$$/
                    if (pwd.test(value)) {
                        this.upwdState = 'success'
                        return true
                    } else {
                        this.upwdState = 'error'
                        return false
                    }
                },
                message: '密码必须包含数字、字母，区分大小写',
                trigger: 'onBlur'
            }],
            // 确认密码
            upwd2Rules: [{
                required: true, message: '密码不能为空', trigger: 'onBlur'
            }, {
                // 自定义校验规则
                validator: value => {
                    let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
                    if (pwd.test(value) && this.upwd == value) {
                        this.upwdState = 'success'
                        return true
                    } else {
                        this.upwdState = 'error'
                        return false
                    }
                    // return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
                    //     .test(value)
                },
                message: '两次输入的密码不一致',
                trigger: 'onBlur'
            }],
            // 手机号码
            // phoneRules: [{
            //     required: true, message: '手机号码不能为空', trigger: 'onBlur'
            // }, {
            //     validator: value => {
            //         let phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            //         if (phone.test(value)) {
            //             this.phoneState = 'success'
            //             return true
            //         } else {
            //             this.phoneState = 'error'
            //             return false
            //         }
            //         // return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            //         //     .test(value)
            //     },
            //     message: '请输入正确格式的手机号码',
            //     trigger: 'onBlur'
            // }]
        }
    },
    comments: {
        SIdentify,
    },
    mounted() {
        this.flag = !this.flag;
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values);
            let params = `uname=${this.uname}&username=${this.username}&upwd=${this.upwd}&uemail=${this.uemail}&phone=${this.phone}&uimg=/img/head_img/default.png&uvote=10&ulike=0&ucollection=0`
            this.axios.post('http://39.108.211.154:8080/reg/', params).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    this.$messagebox('注册成功')
                    this.$router.push('/login')
                } else {
                    this.$messagebox('请重试')
                }
            })
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        // 切换验证码
        refreshCode() {
            this.flag = !this.flag;
        },
        getMakedCode(code) {
            this.code = code
            console.log("getMakedCode:", this.code);
        },
        // 验证码
        checkCode() {
            if (this.securitycode() == this.code()) {
                this.message('')
            } else {
                this.message('验证码不正确')
            }
        },
        // checkForm() {
        //     // if (this.checkUser() && this.upwdRules() && this.upwdRules() && this.upwd2Rules() && this.uemailRules()) {
        //     //     console.log('验证通过，可以注册')
        //     // }
        //     let params = `uname=${this.uname}&username=${this.username}&upwd=${this.password}&uemail=${this.uemail}&phone=${this.phone}&uimg=img/head_img/default.png&uvote=10&ulike=0&ucollection=0`
        //     this.axios.post('http://39.108.211.154:8080/reg/', params).then(res => {
        //         console.log(res)
        //         if (res.data.code == 200) {
        //             this.$messagebox('注册成功')
        //             this.$router.push('/login')
        //         } else {
        //             this.$messagebox('请重试')
        //         }
        //     })
        // },
        // 账号
        // checkUser(value) {
        //     // 自定义校验规则
        //     {
        //         /^[a-zA-Z0-9_-]{6,16}$/
        //             .test(value)
        //     }
        //     let url = `http://39.108.211.154:8080/check_username?username=${value}`
        //     return value = this.axios.get(url).then(res => {
        //         // console.log(res.data)
        //         if (res.data == 'exists') {
        //             // console.log('123')
        //             return false
        //         } else if (res.data == 'non-exists') {
        //             return true
        //         }
        //     })
        // },

        // checkUname() {
        //     let uname = /^[\u4e00-\u9fa5]{4,8}$/
        //     if (uname.test) {

        //     }
        // },
        // checkUpwd() {
        //     let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
        //     if (pwd.test(this.upwd)) {
        //         this.pwdState = 'success'
        //         return true
        //     } else {
        //         this.pwdState = 'error'
        //         return false
        //     }
        // },
        // checkUpwd2() {
        //     let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
        //     if (pwd.test(this.upwd) && this.upwd == this.upwd2) {
        //         this.pwdState = 'success'
        //         return true
        //     } else {
        //         this.pwdState = 'error'
        //         return false
        //     }
        // },
        switchPasswordType() {
            this.passwordType = this.passwordType == 'password' ? 'text' : 'password'
        },
        switchPasswordType1() {
            this.password = this.password == 'password' ? 'text' : 'password'
        },


        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
    }
}
</script>
<style lang="scss" scoped>
div {
    padding: 0;

}

// ::v-deep .van-field__control{
//     width: 60vw;

// }

::v-deep .input {
    // width: 80vw;
    margin: 20px 0 0 0;
    height: 30px;
    display: flex;
    align-items: flex-end;
    border: 0;
    // justify-content: space-evenly;

    // 验证码输入框
    .van-cell input {
        font-size: 12px;
        text-emphasis-color: #c8c9cc;
        width: 80px;
        border: 0;
        // border-bottom: 1px solid rgb(165, 164, 164);
    }
}

.code {
    /*margin: 400px auto;*/
    width: 114px;
    height: 30px;
    /*border: 1px solid red;*/
}

::v-deep.container {
    overflow: hidden;
    margin: 0 23px;
    margin-top: 50px;
    text-align: center;
    // height: 100vh;

    // .van-icon-revoke {
    //     display: block;
    //     margin-top: 30px;
    //     font-size: 20px;
    //     height: 30px;
    //     text-align: left;

    // }

    .hint {
        font-size: 12px;
    }

    span {
        font-size: 40px;
    }

    .van-cell__title {
        width: 85px;
        margin-right: 5px;

        span {
            font-size: 14px;
            margin-left: 15px;
            font-weight: bold;
        }
    }

    a {
        color: #323232;


    }

    // 输入框文字
    .van-field__control {
        font-size: 12px;
        margin-left: 1px;
    }

    .van-cell {
        line-height: 30px;
        height: 30px;
        margin: 30px 0 0 0;
        font-size: 16px;
        color: #323232;
        // border: 1px solid;
        background: rgba(255, 255, 255, 0);
        padding: 0;


        .van-cell__title {
            // width: 60px;
            margin-right: 5px;
            font-size: 16px;

        }

        .van-cell__value {
            border-bottom: 1px solid rgb(165, 164, 164);

            .van-field__error-message {
                font-size: 12px;

            }
        }

        // &::after {
        //     border-bottom: 0px;
        // }

    }

    .van-button {
        width: 100%;
        height: 52px;
        border-radius: 26px;
        background-color: #fdc03a;
        border: 0;

        .van-button__text {
            font-size: 20px;
        }

    }

    .van-checkbox__label {
        font-size: 18px;
        margin-left: 10px;
    }

}
</style>